<template>
    <div >
        <el-form ref="form" :model="userform" size="small">
            <el-row :gutter="20">
                 <el-col :span="8">
                    <div class="grid-content bg-purple-light personal-info">
                        <div class="avatar-body">
                            <el-upload
                            class="avatar-uploader"
                            action="https://jsonplaceholder.typicode.com/posts/"
                            :show-file-list="false"
                            >
                            <img v-if="imageUrl" :src="imageUrl" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                        </div>
                        <div>
                            <el-form-item label="名称" label-width="60px">
                                <el-input v-model="userform.name"></el-input>
                            </el-form-item>
                            <el-form-item label="性别" label-width="60px">
                                <el-radio-group v-model="userform.gender">
                                    <el-radio label="男"></el-radio>
                                    <el-radio label="女"></el-radio>
                                </el-radio-group>
                            </el-form-item>
                            <el-form-item label="年龄" label-width="60px">
                                <el-input v-model="userform.age" placeholder="90后"></el-input>
                            </el-form-item>
                            <el-form-item label="站点" label-width="60px">
                                <el-input v-model="userform.website"></el-input>
                            </el-form-item>
                            <el-form-item label="github" label-width="60px">
                                <el-input v-model="userform.github"></el-input>
                            </el-form-item>
                            <el-form-item label="码云" label-width="60px">
                                <el-input v-model="userform.gitee"></el-input>
                            </el-form-item>
                             <el-form-item label="微信" label-width="60px">
                                <el-input v-model="userform.wechat"></el-input>
                            </el-form-item>
                             <el-form-item label="qq" label-width="60px">
                                <el-input v-model="userform.qq"></el-input>
                            </el-form-item>
                             <el-form-item  label-width="60px">
                                <el-button type="primary">保存</el-button>
                                <el-button>取消</el-button>
                            </el-form-item>
                        </div>
                    </div>
                </el-col>
                <el-col :span="16" class="module-body">
                     <el-form-item>
                        <textarea id="personal"></textarea>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </div>
</template>

<script>
import SimpleMDE from 'simplemde'

export default {
    name:'Personal',
    data() {
        return {
            userform: {
                name: '施鼎',
                gender: '男',
                age: '90后',
                website: 'http://www.sdingo.cn',
                wechat: 'sding536336091',
                qq: 536336091,
                github: 'https://github.com/shixiaoding',
                gitee: 'https://gitee.com/sdoliver/events'
            }
        }
    },
    mounted() {
      const simplemde = new SimpleMDE({
        element: document.getElementById("personal"),
        placeholder: '^~^ 个人详情介绍内容'
      })
    },
}
</script>

<style scope>
    .personal-info {
        -webkit-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14);
        box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14);
        padding: 10px 10px 30px 10px;
        border-radius: 6px;
        background: #fff;
        margin: 50px 0px;
    }
    .avatar-body{
        margin-bottom:20px;
    }
    .avatar-uploader{
        margin: 0 auto;
        display: block;
        width: 120px;
        margin-top: -60px;
        top: -20px;
    }
    .avatar-uploader .el-upload {
    /* border: 1px dashed #d9d9d9; */
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    background: #409EFF;
    box-shadow: 0 16px 38px -12px rgba(0, 0, 0, 0.56), 0 4px 25px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    /* color: #8c939d; */
    color: #ffffff;
    width: 120px;
    height: 120px;
    line-height: 120px;
    text-align: center;
    margin: 0 auto;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  .CodeMirror {
	height: 600px;
}
</style>

